<template>
  <div>
    <!-- <lin-search @query="getLoc" placeholder="请输入物业信息" ref="searchKeyword" /> -->
    <div>
      <el-autocomplete
        popper-class="my-autocomplete"
        class="inline-input"
        v-model="housingName"
        :fetch-suggestions="queryHousingSearch"
        placeholder="请输入物业信息"
        @select="handleHousingSelect"
        style="width: 90%"
      >
        <template slot-scope="{ item }">
          <span class="name">{{ item.title }} - {{ item.district }} - {{ item.city }} - {{ item.province }}</span>
        </template>
      </el-autocomplete>
      <!-- <el-button type="primary" @click="submitForm('form')">选 择</el-button> -->
    </div>
    <div id="container"></div>
  </div>
</template>
<script>
/* eslint-disable */
import maps from 'qqmap'

function TMap() {
  return new Promise(resolve => {
    maps.init('BNUBZ-RBB3X-U7N4E-75WMU-ETSA2-5LBWZ', () => {
      resolve(maps)
    })
  })
}

export default {
  components: {},
  name: 'mapChild',
  data() {
    return {
      searchKeyword: '',
      housingName: '',
      housing: '',
    }
  },
  props: {
    // location: {
    //   type: String,
    //   default: null,
    // },
  },
  created() {
    let _this = this
    TMap().then(qq => {
      //初始化中心点，传入想要设置的值
      this.mapInit(87.60496, 43.79801, 12)
    })
  },
  methods: {
    async queryHousingSearch(queryString, cb) {
      // eslint-disable-next-line
      if (queryString.trim()) {
        const suggestions = await this.getLoc(queryString)
        cb(suggestions)
      }
    },

    handleHousingSelect(item) {
      this.housing = item
      this.housingName = item.title + '-' + item.district + '-' + item.city + '-' + item.province
      this.location = JSON.stringify({
        name: item.title,
        address: item.address,
        lat: item.location.lat,
        lng: item.location.lng,
        province: item.province,
        city: item.city,
        district: item.district,
      })
      let searchObj = item
      searchObj.search = 1
      this.$emit('mapSend', searchObj)
      this.mapInit(item.location.lng, item.location.lat, 16)
      this.$emit('emitLocation', this.location)
    },
    //父组件调用该函数，设置地点
    setLoc(lng, lat) {
      this.mapInit(lng, lat, 16)
    },
    //搜索某一地点名
    async getLoc(ele) {
      try {
        const res = await this.$axios({
          //直接使用腾讯的搜索api的话会报跨域错误
          //我是通过node服务端作为代理去请求数据
          //所以这里就不放出实际ip地址了哈
          //在最后我会将node部分的代码也加上
          url: location.protocol + '//' + location.hostname + '/map/ws/place/v1/suggestion',
          method: 'get',
          params: {
            region: '新疆',
            region_fix: 1,
            keyword: ele.trim(),
            policy: 1,
            key: 'BNUBZ-RBB3X-U7N4E-75WMU-ETSA2-5LBWZ',
          },
        })
        if (res.status == 0) return res.data
      } catch (err) {
        console.log(err)
      }
      return null
    },

    //根据传入的值渲染地图及传出经纬度和地名
    mapInit(lng, lat, zoom) {
      let _this = this
      var map = new qq.maps.Map(document.getElementById('container'), {
        // 地图的中心地理坐标。
        center: new qq.maps.LatLng(lat, lng),
        zoom: zoom,
      })
      // var marker = new qq.maps.Marker({
      //   position: new qq.maps.LatLng(lat, lng),
      //   map: map,
      // })
      // qq.maps.event.addListener(map, 'click', function (event) {
      //   marker.setMap(null)
      // })
      qq.maps.event.addListener(map, 'click', async event => {
        try {
          const res = await this.$axios({
            //直接使用腾讯的搜索api的话会报跨域错误
            //我是通过node服务端作为代理去请求数据
            //所以这里就不放出实际ip地址了哈
            //在最后我会将node部分的代码也加上
            url: location.protocol + '//' + location.hostname + '/map/ws/geocoder/v1',
            method: 'get',
            params: {
              location: event.latLng.getLat() + ',' + event.latLng.getLng(),
              key: 'BNUBZ-RBB3X-U7N4E-75WMU-ETSA2-5LBWZ',
            },
          })
          if (res.status == 0) {
            _this.location = JSON.stringify({
              address: res.result.address,
              lat: res.result.location.lat,
              lng: res.result.location.lng,
              province: res.result.address_component.province,
              city: res.result.address_component.city,
              district: res.result.address_component.district,
            })
            qq.maps.event.addListener(map, 'click', function (event) {
              marker.setMap(null)
            })
            var marker = new qq.maps.Marker({
              position: event.latLng,
              map: map,
            })

            setTimeout(() => {
              _this.$emit('emitLocation', _this.location)
            }, 1000)
          } else {
            this.$message({
              type: 'warning',
              message: '定位解析失败' + res.message,
            })
          }
        } catch (err) {
          this.$message({
            type: 'warning',
            message: '定位解析失败' + err,
          })
        }

        // _this
        //   .$axios({
        //     url: 'https://apis.map.qq.com/ws/place/v1/suggestion',
        //     //这里的url跟上面也是相同的问题
        //     method: 'get',
        //     params: {
        //       location: event.latLng.getLat() + ',' + event.latLng.getLng(),
        //     },
        //   })
        //   .then(res => {
        //     res.data.extra = 1
        //     _this.$emit('mapSend', res.data)
        //   })
        //   .catch(err => {
        //     this.$message({
        //       type: 'warning',
        //       message: '定位解析失败',
        //     })
        //   })
      })
    },
  },
}
</script>
<style>
#container {
  min-width: 300px;
  min-height: 300px;
}
</style>